<template>
	<view class="order-page">
		<view class="search-con c-flex c-flex-col">
			<view class="c-flex jc-between gap-5">
				<view class="input-con c-flex jc-start c-item-center ">
					<image :src="remoteImgUrl+'search-icon.png'"
						style="width: 42rpx;max-height: 42rpx;    margin-right: 12rpx;"></image>
					<input class="uni-input" v-model="lpgUserName" name="text" style="width:72%" confirm-type="search"
						placeholder="搜索用户名" @input="onInputChange" />
					<view class="line"></view>
					<text @click="onInputChange">搜索</text>
				</view>
			</view>
		</view>
		<view class="tabs-con c-flex c-flex-row jc-between">
			<view class="tab-item" v-for="(item,index) in tabbarArr" :key="index" @click="onTabbarClick(item)"
				:class="{'selected':item.selected}">
				<image class="sele-bg" v-if="item.selected" :src="orderImgUrl+'choose.png'"></image>
				{{item.label}}
			</view>
		</view>
		<!-- 列表 -->
		<mescroll-body ref="mescrollRef" @init="mescrollInit" :down="downOption" @down="downCallback" :up="upOption"
			@up="upCallback">
			<view class="p-list">
				<view class="p-l-item" v-for="(item,i) in list" :key="i" @click.stop="onViewDetails(item)">
					<view class="title-con c-flex jc-between c-item-center">
						<view class="c-flex jc-start c-item-center" v-if='item.status ===2 || item.status ===1'>
							<image :src="orderImgUrl+'sendTime.png'"></image>
							<view class="title-1">{{item.appointTime}} <text> 内送达</text></view>
						</view>
						<view class="c-flex jc-start c-item-center" v-if='item.status ===4 || item.status ===3'>
							<view class="d_icon"></view>
							<view class="title-1" v-if='item.status ===3'><text>订单已送达</text></view>
							<view class="title-1" v-if="item.status ===4"><text>订单已安检</text></view>
						</view>
						<view class="c-pos-r">
							<!-- <image class="status" v-if="item.status == 2" :src="orderImgUrl+'zhipai.png'"></image> -->
							<view class="checkStatus" :class="item.failCount===0?'normal':'warn'"
								v-if="item.status ===4">
								<view>{{item.failCount == 0?'安检合格':'安检异常'}}</view>
							</view>
						</view>

					</view>
					<view class="p-content">
						<view class="p-c-item c-flex jc-between">
							<view class="p-v-0 c-flex">
								<view class="c-flex jc-center c-item-center">送</view>
								<view><text>{{item.lpgUserAddress}}({{item.lpgUserName}})</text></view>
							</view>
							<!-- <view class="p-v-1">据您{{item.distance}}</view> -->
						</view>
						<view class="p-c-item">
							<view class="p-v-0 c-flex">
								<view class="bg c-flex jc-center c-item-center">含</view>
								<view class="goodsInfo">
									<text>{{sliceGood(item.items)}}</text>
									<!-- <text v-for="d in item.items" :key="i">
										{{d.weight}}KGx{{d.saleCount}};
										
										
									</text> -->
								</view>
							</view>


						</view>

					</view>
					<view class="p-btn c-flex jc-end" v-if="item.status===2">
						<view class="contactBtn" @tap.stop="callPhone(item.lpgUserPhone)">联系顾客</view>
						<view class="sureBtn" v-if="!item.canPatrol  && item.bottleCount>0" @tap.stop='surehandler(item)'>扫码确认</view>
						<view class="sureBtn" v-if="!item.canPatrol  && item.bottleCount==0" @tap.stop='surehandler(item)'>送达确认</view>
					</view>
					<view class="p-btn c-flex jc-between" v-if="item.status===1">
						<view class="goCheckBtn" @tap.stop="task(item)">接单</view>

					</view>
					<view class="p-btn c-flex jc-between" v-if="item.status===3 && !item.canPatrol">
						<view class="goCheckBtn" @tap.stop="goSecurityCheck(item)">去安检</view>

					</view>
				</view>
			</view>
		</mescroll-body>
		<tydPrompt ref='tydPrompt' :content="content" @confirmPrompt='confirmPrompt'></tydPrompt>
	</view>
</template>

<script>
	import MescrollMixin from "@/components/mescroll-uni/mescroll-mixins.js";
	import {
		OREDR_STATUS
	} from '@/utils/global.js';
	import tydPrompt from '@/components/tyd-prompt/tyd-prompt.vue';
	
	import {
		mapStatus,
		mapMutations
	} from 'vuex'
	export default {
		components: {
			tydPrompt
		},
		mixins: [MescrollMixin], // 使用mixin (在main.js注册全局组件，内部已注册onPullDownRefresh)
		data() {
			return {
				content: '是否送达',
				remoteImgUrl: this.$API.IMG_URL + '/construct-supervision-mp/',
				orderImgUrl: this.$API.IMG_URL + '/gas/yehuaqi/order/',
				commonUrl: this.$API.IMG_URL + '/common/',
				lpgUserName: '',
				tabbarItem: null,
				tabbarArr: [],
				downOption: {
					auto: false,
					native: true // 必须配置此项，且需在pages.json配置"enablePullDownRefresh" : true
				},
				upOption: {
					auto: false,
					noMoreSize: 4,
					empty: {
						tip: '~ 搜索无数据 ~',
						btnText: ''
					}
				},
				page: 1,
				limit: 10,
				indicatorStyle: `height: 50px;line-height:50px;`,
				list: [],
				orderId: null,
				
			};
		},
		onLoad(options) {
			console.log('onLoad')
			uni.setNavigationBarColor({
				backgroundColor: '#f9ead5',
				frontColor: '#000000'
			});
			this.tabbarArr = OREDR_STATUS;

		},
		onShow() {
			console.log('onShow')

			this.initTabbar();

		},
		methods: {
			...mapMutations(['setOrderStatus', 'setPageBackDelta']),
			sliceGood(arr) {
				let newArr = JSON.parse(JSON.stringify(arr));
				let str = '';
				let desc = ''
				let num=0;
				if (newArr.length > 3) {
					//newArr.length = 3
					desc = '等'
				}
				
				for(let i=0;i<newArr.length;i++){
					if(i==3){
						break;
					}
					str += newArr[i].name + ';'
					//num +=newArr[i].saleCount
				}

				str = str && str.slice(0, -1)
				return str + desc+' 共'+newArr.length+'件商品';
			},
			task(item) {
				this.$API.liquefiedGasTask({
					id: item.id
				}).then(res => {
					if (res.code === 0) {

						this.setOrderStatus(OREDR_STATUS[1]);
						this.initTabbar();

					}
				}).catch(() => {

				});
			},
			initTabbar() {
				this.tabbarArr.forEach(item => {
					item['selected'] = false;
				});
				this.tabbarItem = this.$store.getters.orderStatus;
				this.tabbarItem.selected = true;
				this.initData();
			},
			confirmPrompt() {
				this.$API.liquefiedGasOrderArrive({
					id: this.orderId
				}).then(res => {
					if (res.code === 0) {

						this.setOrderStatus(OREDR_STATUS[2]);
						this.initTabbar();

					}
				}).catch(() => {

				});
			},
			goSecurityCheck(item) {
				//console.log(this.$store.getters.pageBackDelta)
				this.setPageBackDelta(2)
				uni.navigateTo({
					url: '/pages/delivery/room-check/room-check?item=' + JSON.stringify(item) + '&type=order'
				})
			},
			surehandler(item) {
				
				
				if(item.bottleCount>0){
					uni.navigateTo({
						url:'./scanList?id='+item.id+'&bottleCount='+item.bottleCount+'&tenantId='+item.tenantId
					})
				}else{
					this.orderId = item.id;
					this.$refs.tydPrompt.open();
				}
				
			},
			callPhone(phoneNumber) {
				uni.makePhoneCall({
					phoneNumber: phoneNumber, // 电话号码
					success: function() {
						console.log('拨打电话成功');
					},
					fail: function(err) {
						console.log('拨打电话失败：', err);
					}
				});
			},
			initData() {
				uni.showLoading({
					title: '加载中'
				});

				setTimeout(()=>{
					const params = {
						page: this.page,
						limit: this.limit,
						status: this.tabbarItem.value,
						name: this.lpgUserName
					};
					this.$API.liquefiedGasList(params).then(res => {
						uni.hideLoading();
						this.mescroll.endSuccess(res.page.list.length);
						//设置列表数据
						if (res.page.currPage == 1) this.list = []; //如果是第一页需手动制空列表
						const currList = res.page.list;
						this.list = this.list.concat(currList); //追加新数据
					}).catch(() => {
						//联网失败, 结束加载
						this.mescroll.endErr();
					});
				},500)
			},
			//tabbar切换事件监听
			onTabbarClick(item) {

				//uni.setStorageSync('orderStatus',null)
				this.tabbarItem.selected = false;
				item.selected = true;
				this.tabbarItem = item;
				this.setOrderStatus(item)
				this.list = [];
				this.page = 1;
				this.mescroll.resetUpScroll() // 再刷新列表数据
			},
			// 下拉刷新
			downCallback() {
				this.onInputChange();
				console.log('down')
			},
			/*上拉加载的回调: 其中page.num:当前页 从1开始, page.size:每页数据条数,默认10 */
			upCallback(page) {
				console.log('up')
				this.page = page.num;
				//联网加载数据
				this.initData();
			},
			// 主动触发下拉刷新
			triggerDownScroll() {
				this.mescroll.triggerDownScroll()
			},
			onInputChange() {
				this.initData();
			},
			onViewDetails(item) {
				uni.navigateTo({
					url: './orderDetail?orderItem=' + JSON.stringify(item)
				})
			},

		}
	}
</script>
<style>
	.uni-button-color {
		color: #E86748 !important;
	}

	page {
		background-color: #F9F9F9;
	}
</style>
<style lang="scss" scoped>
	.order-page {
		position: relative;
		background-image: linear-gradient(rgba(249, 195, 115, .3) 0%, #F9F9F9 100%);

		//background:rgba(249, 195, 115, .6);
		.search-con {
			border-radius: 18rpx;
			padding: 20rpx 18rpx 0;

			.input-con {
				position: relative;
				width: 100%;
				border: 2rpx solid rgba(255, 154, 22, 1);
				height: 80rpx;
				line-height: 80rpx;
				padding-left: 18rpx;
				background: #ffffff;
				border-radius: 16rpx;
				font-size: 24rpx;

				.line {
					height: 40rpx;
					border: 2rpx solid rgba(255, 154, 22, 1);
					position: absolute;
					right: 115rpx;
				}

				text {
					font-size: 28rpx;
					font-family: PingFang-SC-Medium, PingFang-SC;
					font-weight: 500;
					color: #3E3E3E;
					line-height: 40rpx;
					position: absolute;
					right: 38rpx;
				}
			}

			/*修改提示文字的颜色*/
			input::-webkit-input-placeholder {
				color: #8B959F;
			}

			input:-moz-placeholder {
				color: #8B959F;
			}

			input::-moz-placeholder {
				color: #8B959F;
			}

			input:-ms-input-placeholder {
				color: #8B959F;
			}
		}

		.tabs-con {
			margin: 40rpx 40rpx 8rpx;
			width: 450rpx;

			.tab-item {
				font-size: 28rpx;
				font-weight: 400;
				color: #001F42;
				position: relative;
				padding-bottom: 14rpx;

				text {
					background: #FA4B4B;
					padding: 0 10rpx;
					border-radius: 50%;
					font-size: 24rpx;
					color: #ffffff;
					position: absolute;
					right: -20rpx;
					top: -14rpx;
				}

				.sele-bg {
					position: absolute;
					width: 90rpx;
					height: 24rpx;
					bottom: 5rpx;
				}
			}

			.selected {
				font-size: 30rpx;
				font-weight: 800;
				color: #333333;
			}

			//border-bottom: 6rpx solid #0084FF;
		}

		.p-list {
			margin: 20rpx 18rpx 0;

			.p-l-item {
				background: #FFFFFF;
				border-radius: 18rpx;
				padding: 15rpx 28rpx 20rpx;
				margin-bottom: 20rpx;
				position: relative;

				.title-con {
					.d_icon {
						margin-right: 10rpx;
						width: 14rpx;
						height: 32rpx;
						background: linear-gradient(180deg, #F18858 0%, #E86547 100%);
						transform: skewX(-12deg)
					}

					image {
						width: 32rpx;
						height: 50rpx;
						margin-right: 5rpx;
					}

					border-bottom: 2rpx solid #F7F7F7;
					padding-bottom: 12rpx;

					.checkStatus {
						width: 102rpx;
						height: 36rpx;
						border-radius: 8rpx;
						transform: skewX(-12deg);
						font-family: PingFang-SC, PingFang-SC;
						font-weight: 500;
						font-size: 20rpx;
						color: #FFFFFF;
						line-height: 36rpx;
						text-align: center;

						view {
							transform: skewX(12deg);
						}
					}

					.normal {
						background: linear-gradient(180deg, #19C132 0%, #14A92A 100%);
					}

					.warn {
						background: linear-gradient(180deg, #FF776C 0%, #FE6258 47%, #FD4B41 100%);
					}

					.status {
						width: 80rpx;
						height: 50rpx;
					}

					.status-txt {
						position: absolute;
						left: 9rpx;
						top: 4rpx;
						font-size: 20rpx;
						font-family: PingFang-SC, PingFang-SC;
						font-weight: 500;
						color: #FFFFFF;
					}

					.title-1 {
						font-size: 30rpx;
						font-family: PingFangSC-Semibold, PingFang SC;
						font-weight: 600;
						color: #333333;
						margin-bottom: 0rpx;

						text {
							margin-left: 10rpx;
							font-family: PingFang-SC, PingFang-SC;
							font-weight: 400;
							font-size: 30rpx;
							color: #333333;
						}
					}

					.title-2 {
						font-size: 24rpx;
						font-family: PingFang-SC-Regular, PingFang-SC;
						font-weight: 400;
						color: #666666;
					}
				}

				.p-content {
					margin: 25rpx 0 33rpx;

					.p-c-item {
						font-family: PingFang-SC, PingFang-SC;
						font-weight: 500;

						.p-v-0 {
							.bg {
								background: #FBC02D !important;
							}

							.goodsInfo {
								text {
									font-size: 28rpx;
									color: #333333;
									margin-left: 14rpx;
								}
							}

							view:first-child {
								min-width: 42rpx;
								min-height: 42rpx;
								max-width: 42rpx;
								max-height: 32rpx;
								border-radius: 100%;
								background: #1ABA69;
								font-size: 26rpx;
								color: #fff;
							}

							view:nth-child(2) {
								text {
									font-size: 28rpx;
									color: #333333;
									margin-left: 14rpx;
								}

							}
						}

						.p-v-1 {

							font-size: 24rpx;
							color: #8B959F;
						}

						margin-bottom: 16rpx;

						text:first-child {
							font-size: 24rpx;
							color: #666666;
						}

						text:nth-child(2) {
							font-size: 24rpx;
							color: #333333;
							font-weight: 600;
						}

						.details {
							font-size: 24rpx;
							color: #333333;
							font-weight: 600;
							overflow: hidden;
							white-space: nowrap;
							text-overflow: ellipsis;
						}
					}

				}

				.p-btn {
					font-family: PingFang-SC, PingFang-SC;
					font-weight: 500;
					font-size: 28rpx;
					text-align: center;
					gap: 26rpx;

					.contactBtn {
						line-height: 80rpx;
						color: #E86748;
						width: 316rpx;
						height: 80rpx;
						border-radius: 16rpx;
						border: 2rpx solid #E96949;
					}

					.sureBtn {
						border: 2rpx solid transparent;
						line-height: 80rpx;
						width: 316rpx;
						height: 80rpx;
						line-height: 80rpx;
						background: linear-gradient(180deg, #F18858 0%, #E86547 100%);
						border-radius: 16rpx;
						color: #FFFFFF;
					}

					.checkBtn {
						margin: 0 auto;
						width: 652rpx;
						height: 80rpx;
						border-radius: 16rpx;
						border: 2rpx solid #E96949;
						color: #E86748;
						line-height: 80rpx;
					}

					.goCheckBtn {
						margin: 0 auto;
						width: 652rpx;
						height: 80rpx;
						background: linear-gradient(180deg, #F18858 0%, #E86547 100%);
						border-radius: 16rpx;
						color: #FFFFFF;
						line-height: 80rpx;
					}
				}
			}
		}

	}
</style>